<template>
    <div class="hello">
        <div class="content">
            <div class="left">
                <div v-for="(item, index) in dataList" :key="index" class="button"
                    :class="{ active: activeUrl === item.url }" @click="to_page(item.url)">
                    {{ item.name }}
                </div>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { menu } from '../router/menu'
export default {
    name: 'index',
    data () {
        return {
            activeUrl: '',
            dataList: menu
        }
    },
    created () {
        this.to_page(this.dataList.at(-1).url)
    },
    methods: {
        to_page (url) {
            this.activeUrl = url
            this.$router.push(url)
        }
    }
}
</script>

<style lang="less" scoped>
.hello {
    width: 100%;
    height: 100%;

    .content {
        display: flex;
        width: 100%;
        height: 100%;

        .left {
            width: 240px;
            height: 100%;
            overflow: auto;

            .button {
                display: block;
                padding: 10px 20px;
                cursor: pointer;
                &:hover{
                    background: #f6f6f6;
                }
            }

            .active {
                background: rgba(35, 133, 254, 0.1);
                color: rgb(35, 133, 254);
            }
        }

        .right {
            flex: 1;
            height: 100%;
            overflow: auto;
            padding: 20px;
        }

    }
}
</style>
